<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-date-picker type="datetime" placeholder="开始时间" v-model="filters.startTime" style="width:100%;"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-date-picker type="datetime" placeholder="结束时间" v-model="filters.endTime" style="width:100%;"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.tagId" clearable placeholder="新闻类型">
						<el-option v-for="item,index in getTags" :label="item.name" :value="item.id" :key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.title" placeholder="输入标题搜索"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="tagImgs" v-show="false">标签图</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
			<el-table-column type="index" width="100" align="center">
			</el-table-column>
			<el-table-column prop="title" label="标题" width="200" align="center">
			</el-table-column>
			<el-table-column prop="tagName" label="标签" width="200" align="center">
			</el-table-column>
			<el-table-column label="图片" width="200" align="center">
				<template slot-scope="scope">
					<div style="height: 50px;">
						<img style="width: 100%;height: 100%;" :src="scope.row.cover" alt="暂无显示" />
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="showTime" label="定时显示时间" :formatter="dateFormat" width="250" align="center">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" :formatter="dateFormat" min-width="170" align="center">
			</el-table-column>
			<el-table-column prop="updateTime" label="最后编辑时间" :formatter="dateFormat" min-width="170" align="center">
			</el-table-column>
			<el-table-column label="操作" width="150" align="center">
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<div class="toolbar" style="display: flex;justify-content: flex-end;">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false" @close="editorClose">
			<el-form :model="editForm" label-width="90px" :rules="editFormRules" ref="editForm">
				<el-form-item label="标题" prop="title">
					<el-input v-model="editForm.title" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="标签" prop="name">
					<el-select v-model="editForm.tagId" clearable placeholder="角色类型">
						<el-option v-for="item,index in getTags" :label="item.name" :value="item.id" :key="index">
						</el-option>
					</el-select>
					<!-- <el-input v-model="editForm.newsTagName" auto-complete="off"></el-input> -->
				</el-form-item>
				<el-form-item label="定时显示">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.showTime"></el-date-picker>
				</el-form-item>
				
				<el-form-item label="图片成功地址:" prop="cover" v-show="false">
					<div style="height: 50px;width: 50px;">
						<el-input  v-model="editForm.cover" auto-complete="off" placeholder="请输入url地址"></el-input>
					</div>
				</el-form-item>
				
				<el-form-item label="公告图片:" v-if="isShowImg">
					<el-upload class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType1"
					           :on-success="onSuccessUpdate"
					           :before-upload="beforeUploadAdd"
					           :on-error="onErrorUpdate"
					           :limit="1"
					           list-type="picture-card"
					           :on-exceed="handleExceed"
					           :file-list="fileList"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				
				<el-form-item label="图片预览:" prop="cover">
					<el-card :body-style="{ padding: '0px' }">
						<img :src="editForm.cover" class="image">
					</el-card>
				</el-form-item>
				
				<el-form-item label="富文本内容" v-if="isShow">
					<UE ref="ueEdit" :id="ueEditor" :defaultMsg="val"></UE>
				</el-form-item>
			
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
		
		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="90px" :rules="addFormRules" ref="addForm">
				<el-form-item label="标题" prop="title">
					<el-input v-model="addForm.title" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="标签" prop="name">
					<el-select v-model="addForm.tagId" clearable placeholder="角色类型">
						<el-option v-for="item,index in getTags" :label="item.name" :value="item.id" :key="index">
						</el-option>
					</el-select>
					<!-- <el-input v-model="addForm.newsTagName" auto-complete="off"></el-input> -->
				</el-form-item>
				<el-form-item label="定时显示" prop="showTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.showTime"></el-date-picker>
				</el-form-item>
				
				<el-form-item label="图片成功地址:" prop="cover" v-show="false" >
					<el-input  v-model="addForm.cover" auto-complete="off" placeholder="请输入url地址"></el-input>
				</el-form-item>
				
				<el-form-item label="公告图片:">
					<el-upload class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType1"
					           :on-success="onSuccess"
					           :before-upload="beforeUploadAdd"
					           :on-error="onError"
					           list-type="picture-card"
					           :on-exceed="handleExceed"
					           :file-list="fileList"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				
				<el-form-item label="富文本内容">
					<UE ref="ueAdd"></UE>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
		<!-- 标签图 -->
		<el-dialog title="标签图" v-model="tagImgVisible" :close-on-click-modal="false">
			<div>
				<el-form :model="imgForm" label-width="90px">
					<el-form-item label="公司动态">
						<el-col :span="24">
							<el-col :span="6">
								<el-upload
									action="/file/upload"
									:on-success="imgSuccess1"
									:data="fileType1"
									list-type="picture-card">
									<el-button size="small" type="primary">修改</el-button>
								</el-upload>
							</el-col>
							<el-col :span="18">
								<el-card>
									<img :src="imgForm.companyImg" alt="公司动态图">
								</el-card>
							</el-col>
						</el-col>
					</el-form-item>
					<el-form-item label="行业新闻">
						<el-col :span="24">
							<el-col :span="6">
								<el-upload
									action="/file/upload"
									:data="fileType1"
									:on-success="imgSuccess2"
									list-type="picture-card">
									<el-button size="small" type="primary">修改</el-button>
								</el-upload>
							</el-col>
							<el-col :span="18">
								<el-card>
									<img :src="imgForm.tradeNewsImg" alt="行业新闻图">
								</el-card>
							</el-col>
						</el-col>
					</el-form-item>
					<el-form-item label="养老政策">
						<el-col :span="24">
							<el-col :span="6">
								<el-upload
									action="/file/upload"
									:data="fileType1"
									:on-success="imgSuccess3"
									list-type="picture-card">
									<el-button size="small" type="primary">修改</el-button>
								</el-upload>
							</el-col>
							<el-col :span="18">
								<el-card>
									<img :src="imgForm.oldImg" alt="养老政策图">
								</el-card>
							</el-col>
						</el-col>
					</el-form-item>
				</el-form>
			</div>
			
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="tagImgVisible = false">取消</el-button>
				<el-button type="primary" @click="tagImgSubmit" :loading="tagImgLoading">保存</el-button>
			</div>
		</el-dialog>
	
	</section>
</template>

<script>
	//富文本
	import UE from '@/components/UE'
	import { queryNews , addNews , editNews , deleteNews , newsQueryTags, newsEditorTags } from '../../api/api';
	//let Base64 = require('js-base64').Base64;
	export default {
		data() {
			return {
				ids: [],
				filters: {
					startTime: '',
					endTime: '',
					title: '',
					tagId: ''
				},
				users: [],
				total: 0,
				page: 1,
				size:10,
				listLoading: false,
				sels: [],//列表选中列
				currentPage:1,
				ueEditor: '',
				getTags: [],
				
				//图片
				fileList: [],
				fileType1:{
					"fileType" : "SUMMARY_EVENT"
				},
				
				tagImgVisible: false,//标签图
				tagImgLoading: false,
				isShowTagImg: false,
				
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					title: [
						{ required: true, message: '请输入标题', trigger: 'blur' }
					],
					tagId: [
						{ required: true, message: '请输入标签', trigger: 'blur' }
					]
					
				},
				//编辑界面数据
				isShow: false,
				isShowImg: false,
				val: '',
				editForm: {
					title: '',      //标题
					newsTagName: '',//标签名
					showTime: '',   //定时时间
					cover:''        //图片路径
				},
				
				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				//添加页面判断
				addFormRules: {
					title: [
						{ required: true, message: '请输入标题', trigger: 'blur' }
					],
					tagId: [
						{ required: true, message: '请输入标签', trigger: 'blur' }
					]
				},
				//新增界面数据初始化
				addForm: {
					title: '',      //标题
					tagId: '',//标签ID
					showTime: '',   //定时时间
					cover:''        //图片路径
				},
				// 标签图
				imgForm: {
					companyImg: '',
					tradeNewsImg: '',
					oldImg: ''
				}
				
			}
		},
		//e方法实现
		methods: {
			
			//获取下拉框内容信息
			queryTags() {
				let para = {};
				this.listLoading = true;
				newsQueryTags(para).then((res) => {
					this.getTags = res.body.data;
					this.listLoading = false;
				});
			},
			
			addContent() {
				return this.$refs.ueAdd.getUEContent();
			},
			editContent() {
				return this.$refs.ueEdit.getUEContent();
			},
			
			//图片上传成功
			onSuccess(response, file, fileList) {
				
				console.log(file.response.body+"-------");
				
				this.addForm.cover = file.response.body;
				
			},
			onSuccessUpdate(response, file, fileList) {
				
				console.log(file.response.body+"-------");
				
				this.editForm.cover = file.response.body;
				
			},
			onError(response, file, fileList) {
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},
			onErrorUpdate(response, file, fileList) {
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},
			//判断上传格式
			beforeUploadAdd(file) {
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				if (!isJPG && !isPNG) {
					this.$message.error('上传头像图片只能是 JPG和PNG 格式!');
				}
				return isJPG || isPNG;
			},
			//限制上传的文件个数
			handleExceed(files, fileList) {
				this.$message.warning(`当前超出限制！本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			
			//时间格式化
			dateFormat:function(row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			//分页
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			handleSizeChange(val) {
				this.size = val;
				this.getUsers();
			},
			//显示标签图页面
			tagImgs: function (index, row) {
				this.tagImgVisible = true;
				this.isShowTagImg = true;
				newsQueryTags({}).then(res => {
					this.ids = [...res.body.data]
					this.imgForm.companyImg = this.ids[0].imgUrl
					this.imgForm.tradeNewsImg = this.ids[1].imgUrl
					this.imgForm.oldImgg = this.ids[2].imgUrl
				})
				
			},
			//获取新闻信息
			getUsers() {
				let para = {
					pageIndex: this.page,
					pageSize: this.size
				};
				
				if(this.filters.startTime){
					
					if(this.filters.endTime){
						para.endTime = this.filters.endTime;
						para.startTime = this.filters.startTime;
					}
				};
				
				if(this.filters.title){
					para.title = this.filters.title;
				};
				if(this.filters.tagId){
					para.tagId = this.filters.tagId;
				};
				this.listLoading = true;
				
				queryNews(para).then((res) => {
					this.total = res.body.totalCount;
					this.users = res.body.data;
					this.listLoading = false;
				});
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { id: row.id };
					deleteNews(para).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {
				
				});
			},
			
			//显示编辑界面
			handleEdit: function (index, row) {
				this.isShow = true;
				this.isShowImg = true;
				this.editFormVisible = true;
				this.ueEditor = String(index);
				//把当前单条数据注入进form表单
				this.editForm = Object.assign({}, row);
				this.val = this.editForm.content; //载入文本内容
				
			},
			//点击结束
			editorClose() {
				this.editFormVisible = false; //隐藏表单
				setTimeout(() => { //定时
					this.isShow = false;  //隐藏富文本
					this.isShowImg = false; //隐藏图片上传
				},500)
			},
			//跳转显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				//刷新控件内容值
				this.addForm = {
					title: '',      //标题
					tagId: '',//标签名
					showTime: '',   //定时时间
					cover:''        //图片路径
				};
			},
			
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = {
								id: this.editForm.id,
								title: this.editForm.title, //标题
								tagId: this.editForm.tagId, //标签ID
								// showTime: '', //定时时间
								cover:this.editForm.cover //图片路径
							}
							if(!this.editForm.showTime){
								this.editLoading = false;
								this.$message.error('请选择定时时间！');
								return;
							}else{
								para.showTime = this.editForm.showTime;
							};
							para.content = this.editContent();
							editNews(para).then((res) => {
								this.editLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								setTimeout(() => {
									this.isShow = false;
									this.isShowImg = false;
								},500)
								this.getUsers();
							});
						});
					}
				});
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							let para = {
								title: this.addForm.title,      //标题
								tagId: this.addForm.tagId,      //标签ID
								cover: this.addForm.cover       //图片路径
							}
							if(!this.addForm.showTime){
								this.addLoading = false;
								this.$message.error('请选择定时时间！');
								return;
							}else{
								para.showTime = this.addForm.showTime;
							};
							para.content = this.addContent();
							addNews(para).then((res) => {
								this.addLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								//刷新页面
								this.getUsers();
							});
						});
					}
				});
			},
			
			imgSuccess1(response, file, fileList) {
				this.imgForm.companyImg = file.response.body
			},
			imgSuccess2(response, file, fileList) {
				this.imgForm.tradeNewsImg = file.response.body
			},
			imgSuccess3(response, file, fileList) {
				this.imgForm.oldImg = file.response.body
			},
			tagImgSubmit() {
				let arr = []
				let id = []
				arr.push(this.imgForm.companyImg)
				arr.push(this.imgForm.companyImg)
				arr.push(this.imgForm.oldImg)
				id.push(this.ids[0].id)
				id.push(this.ids[1].id)
				id.push(this.ids[2].id)
				let para = {
					urls: arr,
					tagIds: id
				}
				newsEditorTags(para).then(res => {
					this.tagImgVisible = false;
					newsQueryTags({}).then(res => {
						this.ids = [...res.body.data]
						this.imgForm.companyImg = this.ids[0].imgUrl
						this.imgForm.tradeNewsImg = this.ids[1].imgUrl
						this.imgForm.oldImgg = this.ids[2].imgUrl
					})
				})
			}
		},
		mounted() {
			this.getUsers();
			this.queryTags();
		},
		components: {
			UE
		},
		
	}

</script>

<style scoped>

</style>
